{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>修改密码</title>
<style type="text/css">
    html,body{ background-color: #fff;}
    .mui-content{ background-color: #fff; padding-top: 10%;}
    .mui-content>.mui-table-view:first-child{ margin-top: 0;}
    .mui-input-group{background: none;padding: 0 25px;}
    .mui-input-group .mui-input-row{height: 65px;}
    .mui-input-group:before,.mui-input-group:after{height: 0;}
    .mui-input-group input{margin: 15px 0 0 0; padding: 10px 0;}
    .mui-input-group .mui-input-row:after{background-color: #ddd !important;left: 0;}
    .mui-input-row .mui-input-password~.mui-icon-eye{top: 30px;}
    .mui-content-padded{ margin: 15px 0 0 0;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <form class="mui-input-group">
        <div class="mui-input-row">
            <input type="text" placeholder="请输入手机号码">
        </div>
        <div class="mui-input-row">
            <input type="text" class="mui-input-clear" placeholder="请输入手机验证码">
            <input type="button" class="mb-code" value="获取验证码">
        </div>
        <div class="mui-input-row mui-password">
            <input type="password" class="mui-input-password" placeholder="请输入新密码">
        </div>
        <div class="mui-input-row mui-password">
            <input type="password" class="mui-input-password" placeholder="请确认新密码">
        </div>
        <div class="mui-content-padded">
            <button type="button" id="toastBtn" class="mui-btn mui-btn-primary mui-btn-block">确认修改</button>
        </div>
    </form>
</div>
{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
    let params = $('.mui-input-group div:eq(0) input[type="text"]');
    $('.mb-code').on('click',function(){
        mui.get('/getyzm', {
                mobile:params.val(),
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    console.log(data);
                }
            },'json'
        );
        yfs();
    });


    $('#toastBtn').on('click',function(){
        mui.post('/editpassword', {
                mobile:params.val(),
                code:8888,
                password:123456,
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    console.log(data);
                    mui.toast('修改成功');
                    window.location.href = '/my'
                }
            },'json'
        );
    });

    let time = 60;
    function yfs(){
        $('.mb-code').val('已发送('+time+')');
        $('.mb-code').attr("disabled","disabled");
        time--;
        if(time == -2){
            $('.mb-code').removeAttr("disabled");
            $('.mb-code').val('获取验证码');
            time = 5;
            return true;
        }
        setTimeout("yfs()",1000);
    }
</script>
<!--flotdemo-->
{% endblock %}
